<?php
// No direct access.
defined('_JEXEC') or die; ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html xmlns"http://www.w3.org/1999/xhtml" xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>" dir="<?php echo $this->direction; ?>">
  <head>
	<jdoc:include type="head" />
	<link rel="stylesheet" type="text/css" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/css/template.css" />
	<script type="text/javascript" src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/js/jquery-1.10.2.min.js"></script>
	<script type="text/javascript" src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/js/jquery.cycle.all.js"></script>
	<script type="text/javascript" src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/js/textualizer.min.js"></script>
	<script type="text/javascript">
		$(document).ready(function() {
			$('.slideshow').cycle({
				fx: 'fade', // choose your transition type, ex: fade, scrollUp, shuffle, etc...
				speed: 5000,
				timeout: 2000
			});
		});
	</script>
	<script type="text/javascript">
		$(document).ready(function() {
		  $(function() {
				var list = ['Bilanzbuchhaltung', 'Lohnverrechnung', 'Bilanzierung/Jahresabschluss', 'Kostenrechnung', 'Arbeitnehmerveranlagung'];  // list of blurbs
				 
				var txt = $('#txtlzr');  // The container in which to render the list
				 
				var options = {
				  duration: 3500,          // Time (ms) each blurb will remain on screen
				  rearrangeDuration: 2000, // Time (ms) a character takes to reach its position
				  effect: 'fadeIn',        // Animation effect the characters use to appear
				  centered: true           // Centers the text relative to its container
				}
				 
				txt.textualizer(list, options); // textualize it!
				txt.textualizer('start'); // start		

		  })
		});
	</script>

  </head>
  <body>
	
	<div id="container">
		<div id="top">
			<div id="logo">
				<img style="width: 360px" src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/images/logo2_1.png" />
			</div>
			<div id="search">
				<jdoc:include type="modules" name="position-0" />
			</div>
			
			<div id="topmenu">
				<jdoc:include type="modules" name="position-1" />
			</div>
			<div id="sliderContainer">
				<div id="txtlzr"></div>
				<div id="slider">
					<div class="slideshow">
						<img width="700" src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/images/Arbeit.png" 
						style="position: absolute; top: 0px; left: 0px; display: none; z-index: -2; opacity: 0; width: 700px;" />
						<img width="700" src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/images/Kassa.png"
						style="position: absolute; top: 0px; left: 0px; display: none; z-index: -2; opacity: 0; width: 700px;" />
						<img width="700" src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/images/Ordner.png" 
						style="position: absolute; top: 0px; left: 0px; display: block; z-index: -2; opacity: 0; width: 700px;" />
						<img width="700" src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/images/Rechner.png"
						style="position: absolute; top: 0px; left: 0px; display: block; z-index: -1; opacity: 1; width: 700px;" />
						<img width="700" src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/images/Rechnung.png" 
						style="position: absolute; top: 0px; left: 0px; display: none; z-index: -2; opacity: 0; width: 700px; " />
					</div>
				</div>
			</div>
		</div>
		
		<div id="middle">
			<div id="left">
				<jdoc:include type="modules" name="position-7" />
			</div>
				
			<div id="content">
					<jdoc:include type="component" />
			</div>
			<div id="right">
				<jdoc:include type="modules" name="position-6" />
			</div>
		</div>

		<div id="footer">
				<jdoc:include type="modules" name="position-14" />
		</div>
	</div>
	
  </body>
</html>
